import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { GlobalAlert, Close, Paragraph, Title } from '@zendeskgarden/react-notifications';
import { GlobalAlertStory } from './stories/GlobalAlertStory';
import { GLOBAL_ALERT_BUTTONS } from './stories/data';
import README from '../README.md';

<Meta
  title="Packages/Notifications/GlobalAlert"
  component={GlobalAlert}
  subcomponents={{
    'GlobalAlert.Button': GlobalAlert.Button,
    'GlobalAlert.Close': GlobalAlert.Close,
    'GlobalAlert.Content': GlobalAlert.Content,
    'GlobalAlert.Title': GlobalAlert.Title
  }}
/>

# API

<ArgsTable />

# Demo

<Canvas>
  <Story
    name="GlobalAlert"
    args={{
      type: 'info',
      anchor: 'Anchor',
      button: 'Button',
      ariaLabel: 'Label',
      content: 'Content',
      title: 'Title',
      hasClose: true
    }}
    argTypes={{
      hasClose: { name: 'GlobalAlert.Close', type: 'boolean', table: { category: 'Story' } },
      button: { name: 'children', type: 'string', table: { category: 'GlobalAlert.Button' } },
      isBasic: { type: 'boolean', table: { category: 'GlobalAlert.Button' } },
      ariaLabel: { name: 'aria-label', type: 'string', table: { category: 'GlobalAlert.Close' } },
      content: { name: 'text', type: 'string', table: { category: 'GlobalAlert.Content' } },
      anchor: { name: 'Anchor', type: 'string', table: { category: 'GlobalAlert.Content' } },
      isExternal: {
        name: 'Anchor isExternal',
        type: 'boolean',
        table: { category: 'GlobalAlert.Content' }
      },
      title: { name: 'children', type: 'string', table: { category: 'GlobalAlert.Title' } },
      isRegular: { type: 'boolean', table: { category: 'GlobalAlert.Title' } }
    }}
    parameters={{
      design: {
        allowFullscreen: true,
        type: 'figma',
        url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=12311%3A50200'
      }
    }}
  >
    {args => <GlobalAlertStory {...args} />}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
